import axios from 'axios';
import React,{Component} from 'react'
// 轮播图插件
import { Carousel} from 'antd-mobile';
// 引入图片
import nav1Src from '../../assets/images/nav-1.png'
import nav2Src from '../../assets/images/nav-2.png'
import nav3Src from '../../assets/images/nav-3.png'
import nav4Src from '../../assets/images/nav-4.png'
// 引入局部样式 将样式文件看成是一个js文件来引入
import indexCss from './index.module.scss'
// 引入封装的axios文件
import { baseURL, request } from "../../utils/request";
// 引入城市选择组件
import Citysearch from '../../components/Citysearch'

class index extends Component{
    state={
        // 轮播图数组
        swiperList:[],
        imgHeight: 176,
        // 导航数组
        navList: [
            {
              id: 1,
              title: "整租",
              imgSrc: nav1Src
            },
            {
              id: 2,
              title: "合租",
              imgSrc: nav2Src
            },
            {
              id: 3,
              title: "地图找房",
              imgSrc: nav3Src
            },
            {
              id: 4,
              title: "去出租",
              imgSrc: nav4Src
            },
          ],
        // 租房小组
        rentGroupList: [],
        // 最新咨詢
        newsList:[]
    }
    componentDidMount(){
        // 轮播图数据
        this.getSwiper()
        // 租房小组数据
        this.getGroupList()
        // 最新资讯
        this.getnewsList()
    }
    // 获取轮播图数据
    async getSwiper(){
        const res=await request.get('/home/swiper')
        // console.log(res);
        this.setState({
            swiperList:res.data.body
        })
    }
    // 租房小組数据
    async getGroupList(){
        const res=await request.get('/home/groups')
        // console.log(res);
        this.setState({
            rentGroupList:res.data.body 
        })
    }
    // 最新资讯
    async getnewsList(){
        const res=await request.get('/home/news')
        // console.log(res);
        this.setState({
            newsList:res.data.body
        })
    }
    render(){
        const {swiperList,navList,rentGroupList,newsList}=this.state;
        return (
            <div>
            {/* 轮播图 start */}
            <div className={indexCss.index_carousel}>
            <div className={indexCss.city_search_wrap}>
               <Citysearch></Citysearch>
               </div>
            {swiperList.length && < Carousel
          autoplay
          infinite
        >
          {swiperList.map(val => (
            <a
               key={val.id}
              href="http://www.alipay.com"
              style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
            >
              <img
                src={baseURL+val.imgSrc}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            </a>
          ))}
           </Carousel>}
           {/* 轮播图 end */}
                </div>
            {/* 轮播图end */}
            {/* 导航start */}
            <div className={indexCss.index_nav}>
                {navList.map(v=><div className={indexCss.nav_item} key={v.id}>
                    <img src={v.imgSrc} />
                <div className={indexCss.nav_title}>{v.title}</div>
                </div>)}
            </div>
            {/* 导航end */}
            {/* 租房小组start */}
            <div className={indexCss.rent_content}>
                <div className={indexCss.rent_group}>
                    <span>租房小组</span>
                    <span>更多</span>
                </div>
                <div className={indexCss.rent_group_content}>
                    {rentGroupList.map(v=><div key={v.id} className={indexCss.rent_item}>
                        <div className={indexCss.rent_item_info}>
                        <div className={indexCss.rent_title}>{v.title}</div>
                        <div className={indexCss.rent_desc}>{v.desc}</div>
                        </div>
                        <div className={indexCss.rent_item_img}>
                        <img src={baseURL+v.imgSrc} />
                        </div>
                    </div>)}
                </div>
            </div>
            {/* 租房小组end */}
            {/* 最新咨詢 statr*/}
            <div className={indexCss.index_news}>
                <div className={indexCss.index_news_title}>最新咨询</div>
                <div className={indexCss.index_news_content}>
                    {newsList.map(v=><div key={v.id} className={indexCss.index_news_item}>
                   <div className={indexCss.index_news_img}>
                   <img src={baseURL+v.imgSrc}/>
                   </div>
                   <div className={indexCss.index_news_info}>
                    <div className={indexCss.index_news_top}>{v.title}</div>
                    <div className={indexCss.index_news_footer}>
                        <div className={indexCss.index_news_from}>{v.from}</div>
                        <div className={indexCss.index_news_date}>{v.date}</div>
                    </div>
                   </div>
    
                    </div>)}
                </div>
            </div>
            {/* 最新咨詢end */}
        </div>

        )
    }
}
export default index